<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>库存移库</title>
    <script src="/js/vue/vue.js"></script>
    <link rel="stylesheet" href="/js/elementui/index.css">
    <script src="/js/elementui/index.js"></script>
    <script src="/js/axios/axios.min.js"></script>
</head>
<body>
<div id="app">
    <!--显示移库对话框按钮 start-->
    <el-button type="success" @click="showTransferBox">移库操作</el-button>
    <!--显示移库对话框按钮 end-->

    <!--表格组件 start-->
    <el-table
            :data="mv"
            border
            style="width: 100%">
        <el-table-column
                label="移库单号"
                prop="mvNo">
        </el-table-column>
        <el-table-column
                label="移出仓库"
                prop="mvOut">
        </el-table-column>
        <el-table-column
                label="移入仓库"
                prop="mvIn">
        </el-table-column>
        <el-table-column
                label="转移商品"
                prop="mvGoods">
        </el-table-column>
        <el-table-column
                label="转移数量"
                prop="mvNumber">
        </el-table-column>
        <el-table-column
                label="移库原因"
                prop="mvMark">
        </el-table-column>
        <el-table-column
                label="移库负责人"
                prop="mvPerson">
        </el-table-column>
        <el-table-column
                label="联系电话"
                prop="mvTel">
        </el-table-column>
        <el-table-column
                label="移库时间"
                prop="mvTime">
        </el-table-column>
    </el-table>
    <!--表格组件 end-->

    <!--分页组件 start-->
    <el-pagination
            background
            layout="prev, pager, next"
            :page-size="size"
            :current-page="current"
            :total="total"
            @current-change="loadPage">
    </el-pagination>
    <!--分页组件 end-->

    <!--移库对话框 start-->
    <el-dialog title="移库" :visible.sync="transferVisible" width="80%" @close="clearForm">
        <el-form ref="form" :model="form" label-width="80px">
            <el-form-item label="移出仓库">
                <el-select v-model="form.mvOut" placeholder="请选择移出仓库">
                    <el-option v-for="item of ware" :label="item.wareName" :value="item.wareName"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="移入仓库">
                <el-select v-model="form.mvIn" placeholder="请选择移入仓库">
                    <el-option v-for="item of ware" :label="item.wareName" :value="item.wareName"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="商品名称">
                <el-input v-model="form.mvGoods"></el-input>
            </el-form-item>
            <el-form-item label="商品数量">
                <el-input v-model="form.mvNumber"></el-input>
            </el-form-item>
            <el-form-item label="负责人">
                <el-input v-model="form.mvPerson"></el-input>
            </el-form-item>
            <el-form-item label="移库原因">
                <el-input type="textarea" v-model="form.mvMark"></el-input>
            </el-form-item>
            <el-form-item label="联系电话">
                <el-input v-model="form.mvTel"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="transfer">确认</el-button>
                <el-button @click="transferVisible = false">取消</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
    <!--移库对话框 end-->
</div>

<script>
    var vm = new Vue({
        el: '#app',
        data() {
            return {
                mv: null, // 移库记录
                current: 1, // 当前页
                size: 5, // 每页行数
                total: 0, // 数据总数
                transferVisible: false, // 控制移库对话框显示
                ware: '', // 仓库
                form: {
                    mvOut: '',
                    mvIn: '',
                    mvGoods: '',
                    mvNumber: '',
                    mvMark: '',
                    mvPerson: '',
                    mvTel: '',
                }, // 移库表单
            }
        },
        mounted() {
            // 初始加载移库记录
            this.loadPage(1);
        },
        methods: {
            /**
             * 加载当前页
             * @param current 页数
             */
            loadPage(current) {
                var params = {current};

                axios.get('/mv', {params}).then(value => {
                    this.mv = value.data.data.records;
                    this.current = value.data.data.current;
                    this.size = value.data.data.size;
                    this.total = value.data.data.total;
                });
            },

            /**
             * 显示移库详情对话框
             */
            showTransferBox() {
                axios.get('/warehouses').then(value => {
                    this.ware = value.data.data;
                });
                this.transferVisible = true;
            },

            /**
             * 移库
             */
            transfer() {
                if (this.form.mvOut == this.form.mvIn) {
                    this.$message({
                        type: 'warning',
                        message: '移出仓库和移入仓库不能相同！'
                    });

                    return;
                }

                axios.post('/mv',this.form).then(value => {
                    this.$message({
                        message: '移库成功！',
                        type: 'success'
                    });

                    this.loadPage(1);

                    this.transferVisible = false;
                });
            },

            /**
             * 清除Form
             */
            clearForm() {
                for (let formKey in this.form) {
                    this.form[formKey] = '';
                }
            }
        }
    })
</script>
</body>
</html>